<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div
          v-else
          :style="{ height: baseHeight - 16 + 'px' }"
          class="host-body content"
      >
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10"/>
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="decorationColor" class="dv-dec-8"/>
            <div class="title">
              <span class="title-text">大数据可视化平台</span>
              <dv-decoration-6
                  :color="['#50e3c2', '#67a1e5']"
                  :reverse="true"
                  class="dv-dec-6"
              />
            </div>
            <dv-decoration-8
                :color="decorationColor"
                :reverse="true"
                class="dv-dec-8"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10"/>
        </div>
        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-left"></span>
              <span class="text">设备控制</span>
            </div>
            <div class="react-left ml-3">
              <span class="text">数据分析</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b">河南神土信息技术有限公司</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text time-text"
              >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              >
            </div>
          </div>
        </div>
        <div class="content-row" style="margin-top: 10px">
          <div class="content-box">
            <dv-border-box-12>
              <div class="box-padding">
                <lampData></lampData>
              </div>
            </dv-border-box-12>
          </div>
          <div class="content-box">
            <dv-border-box-12>
              <div class="box-padding">
                <liveData></liveData>
              </div>
            </dv-border-box-12>
          </div>
          <div class="content-box">
            <dv-border-box-12>
              <div class="box-padding">
                <videoData></videoData>
              </div>
            </dv-border-box-12>
          </div>
        </div>
        <div class="content-row">
          <div class="content-box">
            <dv-border-box-12>
              <div class="box-padding">
                <tvData></tvData>
              </div>
            </dv-border-box-12>
          </div>
          <div class="content-box">
            <dv-border-box-12>
              <div class="box-padding">
                <alarmLog></alarmLog>
              </div>
            </dv-border-box-12>
          </div>
          <div class="content-box">
            <dv-border-box-12>
              <div class="box-padding">
                <travelLog></travelLog>
              </div>
            </dv-border-box-12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import {formatTime} from "../utils/index.js";
import {WebSocketClient} from '../utils/webSocket'
import lampData from "@/views/components/lampData.vue";
import liveData from "@/views/components/liveData.vue";
import alarmLog from "@/views/components/alarmLog.vue";
import travelLog from "@/views/components/travelLog.vue";
import videoData from "@/views/components/videoData.vue";
import tvData from "@/views/components/tvData.vue";

export default {
  mixins: [drawMixin],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
      webSocketClient: null,
      wsUrl: 'ws://192.168.100.48:8081/ws/abc/1',
    };
  },
  components: {
    lampData,
    liveData,
    alarmLog,
    travelLog,
    videoData,
    tvData,
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  created() {
    this.initWebSocket();
  },
  beforeDestroy() {
    clearInterval(this.timing);
    this.closeWebSocket();
  },
  methods: {
    //初始化
    initWebSocket() {
      this.webSocketClient = new WebSocketClient(this.wsUrl);
      // 初始化连接
      this.webSocketClient.connect();

      // 连接成功时的回调
      this.webSocketClient.onopen(() => {
        console.log('WebSocket 连接成功');
      });

      // 接收到消息时的回调
      this.webSocketClient.onmessage((event) => {
        console.log('收到消息----:', event.data);
        // this.messages.push(event.data);
      });

      // 连接关闭时的回调
      this.webSocketClient.onclose(() => {
        console.log('WebSocket 连接关闭');
      });

      // 发生错误时的回调
      this.webSocketClient.onerror((event) => {
        console.error('WebSocket 错误:', event);
      });
    },
    //关闭
    closeWebSocket() {
      if (this.webSocketClient) {
        this.webSocketClient.close();
      }
    },
    //发送信息
    sendMessage(message) {
      if (this.webSocketClient) {
        this.webSocketClient.send(JSON.stringify({type: 'data', content: message}));
      }
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/index.scss";

.top-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding-bottom: 16px;
}

.content-row {
  width: 100%;
  height: 490px;
  display: flex;
  justify-content: space-between;
}

.content-box {
  width: 32.66%;
  height: 100%;

  .box-padding {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

.time-text {
  color: #fff;
  font-size: 20px;
}


</style>
